<template>
  <div>
    <CustomDialog
        :title="state.dialog.title"
        v-model:visible="state.dialog.isShowDialog"
        dialogWidth="900px"
        @close="closeDialog"
        :dialogFooterBtn="true"
        :showSubmit="true"
        @submit="submit"
    >
      <el-form :model="state.ruleForm" ref="commentRef" label-width="100px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="反馈类型" prop="type">
              <el-input v-model="state.ruleForm.type" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="state.ruleForm.nickname" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="state.ruleForm.phone" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="反馈内容" prop="content">
              <el-input v-model="state.ruleForm.content" disabled></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="反馈图片" prop="images">
              <div class="sd-flex">
                <div class="log-image img" v-for="(v, index) in state.ruleForm.imagesList" :key="index">
                  <el-image :src="STATIC_URL + v" fit="cover" class="image"
                            :preview-src-list="loadPreviewImages(state.ruleForm.imagesList)"/>
                </div>
              </div>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="处理状态" prop="operator">

              <el-radio-group v-model="state.ruleForm.status">
                <el-radio :value="0" label="未处理"></el-radio>
                <el-radio :value="1" label="已处理"></el-radio>
              </el-radio-group>
              <!--							<el-select v-model="state.ruleForm.status" style="width: 100%">-->
              <!--								<el-option :value="0" label="未处理"></el-option>-->
              <!--								<el-option :value="1" label="已处理"></el-option>-->
              <!--							</el-select>-->
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="state.ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import messageUtils from '/@/utils/messageUtils';
import {FeedbackApi} from '/@/api/shop/feedback';
import {STATIC_URL} from '/@/utils/config';

let emits = defineEmits(["refresh"]);
const state = reactive({
  ruleForm: {
    content: '',
    nickname: '',
    avatar: '',
    status: '',
    id: '',
    remark: '',
    phone: '',
    type: '',
    images: [],
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '会员反馈',
    submitTxt: '',
  },
});
const loadPreviewImages = (images: string[]) => {
  let previewImages: string[] = [];
  images.forEach((e) => {
    previewImages.push(STATIC_URL + e);
  });
  return previewImages;
};

const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

const submit = async () => {
  try {
    await FeedbackApi().update({
      id: state.ruleForm.id,
      status: state.ruleForm.status,
      remark: state.ruleForm.remark,
    });
    closeDialog();
    messageUtils().success("操作成功")
    emits("refresh")
  } catch (e) {
    messageUtils().error('操作失败，请稍后重试');
  }
};

const openDialog = async (id: string) => {
  state.dialog.isShowDialog = true;
  try {
    const {data} = await FeedbackApi().view(id);
    state.ruleForm = data;
  } catch (e) {
    messageUtils().error('操作失败');
  }
};

defineExpose({openDialog});
</script>

<style scoped lang="scss">
.log-image {
  height: 48px;
  width: 48px;

  &.img {
    padding: 5px;
  }
}
</style>
